<!--
 * @Author: 曹捷
 * @Date: 2019-09-11 15:16:32
 * @LastEditors: 曹捷
 * @LastEditTime: 2019-10-08 20:30:18
 * @Description: file content
 -->
<template>
  <div class="obit-line flex-l-r">
    <div :key="index" :style="{'width':item.width+'%','background':item.backColor}" class="line" v-for="(item,index) in lineList">
      <span :style="{'border-top':' 30rpx solid '+item.backColor,'left':leftSize+'%'}" class="lineIndex" v-if="value>item.start && value <= item.end"></span>
      {{item.name}}
      <span class="numLeft">{{item.start}}</span>
      <span class="numLeft numRight" v-if="index === lineList.length-1">{{item.end}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number
    },
    lineList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    leftSize() {
      let res = 0
      for (let i of this.lineList) {
        if (this.value > i.start && this.value <= i.end) {
          res = ((this.value - i.start) * 100) / (i.end - i.start) - 10
          break
        }
      }
      return res
    }
  }
}
</script>

<style lang= "scss">
.obit-line {
  padding: 60rpx 40rpx;
  width: 100%;
  .numLeft {
    position: absolute;
    bottom: -60rpx;
    color: #999999;
    left: -10%;
    font-size: 36rpx;
  }
  .numRight {
    left: 85%;
  }
  .lineIndex {
    width: 0;
    height: 0;
    border-right: 20rpx solid transparent;
    border-left: 20rpx solid transparent;
    position: absolute;
    top: -40rpx;
  }
  .line {
    color: #ffffff;
    position: relative;
    text-align: center;
    height: 62rpx;
    line-height: 62rpx;
  }
}
</style>